<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~  This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~  This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~  You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org.
  -->

<div class="table-container">
  <div id="programAssociationTable" class="prog-role-grid">
  <div class="fluid-grid">
    <div class="row-fluid fluid-grid-header">
      <div class="span2">
        <div id="programHeader" class="fluid-grid-cell" openlmis-message="program.header"></div>
      </div>
      <div class="span3">
        <div id="categoryHeader" class="fluid-grid-cell" openlmis-message="label.category"></div>
      </div>
      <div class="span1">
        <div id="activeHeader" class="fluid-grid-cell" openlmis-message="label.active"></div>
      </div>
      <div class="span1">
        <div id="fullSupplyHeader" class="fluid-grid-cell" openlmis-message="label.product.fullSupply"></div>
      </div>
      <div class="span3">
        <div class="row-fluid">
          <div class="span4">
            <div id="displayOrderHeader" class="fluid-grid-cell" openlmis-message="label.display.order"></div>
          </div>
            <div class="span4">
                <div id="dosesPerMonthHeader" class="fluid-grid-cell" openlmis-message="label.doses.per.month"></div>
            </div>
            <div class="span4">
                <div id="dosesPerMonthHeader" class="fluid-grid-cell" openlmis-message="label.price.per.pack"></div>
            </div>
        </div>
      </div>
      <div class="span2">
        <div class="fluid-grid-cell">&nbsp;</div>
      </div>
    </div>

    <div class="row-fluid" ng-repeat="programProduct in programProducts" tab-scroll>
        <div class="span2">
            <div class="fluid-grid-cell">
                <span id="programSelected{{$index}}" ng-bind="programProduct.program.name"></span>
            </div>
        </div>

        <div class="span3">
            <div class="fluid-grid-cell">
                <div ng-show="!programProduct.underEdit">
                    <span id="categorySelected{{$index}}" ng-bind="programProduct.productCategory.name"></span>
                </div>
                <div ng-show="programProduct.underEdit">
                    <select class="select2-container bottom-spacer span10"
                            id="category{{$index}}"
                            ng-change="updateCategory($index)"
                            ng-options="category.id as category.name for category in categories | orderBy: 'name'"
                            ng-model="programProduct.productCategory.id">
                        <option value="" openlmis-message="placeholder.select.category"></option>
                    </select>
                </div>
            </div>
        </div>

        <div class="span1">
            <div class="fluid-grid-cell">
                <i id="activeIcon{{$index}}" class="icon icon-ok"
                   ng-show="programProduct.active && !programProduct.underEdit"></i>
                <input type="checkbox" id="active{{$index}}" ng-model="programProduct.active"
                       ng-show="programProduct.underEdit"/>
            </div>
        </div>
        <div class="span1">
            <div class="fluid-grid-cell">
                <i id="fullSupplyIcon{{$index}}" class="icon icon-ok"
                   ng-show="programProduct.fullSupply && !programProduct.underEdit"></i>
                <input type="checkbox" id="fullSupply{{$index}}" ng-model="programProduct.fullSupply"
                       ng-show="programProduct.underEdit"/>
            </div>
        </div>

        <div class="span3">
            <div class="row-fluid">
                <div class="span4">
                    <div class="fluid-grid-cell">
                        <div id="displayOrderLabel{{$index}}" ng-bind="programProduct.displayOrder" class="right-justified"
                             ng-show="!programProduct.underEdit"></div>

                        <div class="position-relative">
                            <input id="displayOrderInput{{$index}}" type="text" ng-model="programProduct.displayOrder"
                                   name="displayOrder{{$index}}" numeric-validator="positiveInteger" maxlength="10"
                                   class="right-justified" ng-show="programProduct.underEdit"/>
                <span class="rnr-form-error" style="display:none;" id="displayOrder{{$index}}"
                      openlmis-message="error.number.only"></span>
                        </div>
                    </div>
                </div>

                <div class="span4">
                    <div class="fluid-grid-cell">
                        <div id="dosesPerMonthLabel{{$index}}" ng-bind="programProduct.dosesPerMonth" class="right-justified"
                             ng-show="!programProduct.underEdit"></div>

                        <div class="position-relative">
                            <input id="dosesPerMonthInput{{$index}}" type="text" ng-model="programProduct.dosesPerMonth"
                                   numeric-validator="positiveInteger" maxlength="10" name="dosesPerMonth{{$index}}"
                                   class="right-justified" ng-show="programProduct.underEdit"/>
                <span class="rnr-form-error" style="display:none;" id="dosesPerMonth{{$index}}"
                      openlmis-message="error.number.only"></span>
                        </div>
                    </div>
                </div>

                <div class="span4">
                    <div class="fluid-grid-cell">
                        <div id="currentPriceLabel{{$index}}" ng-bind="programProduct.currentPrice" class="right-justified"
                             ng-show="!programProduct.underEdit"></div>

                        <div class="position-relative">
                            <input id="currentPriceInput{{$index}}" type="text" ng-model="programProduct.currentPrice"
                                     maxlength="10" name="currentPrice{{$index}}"
                                   class="right-justified" ng-show="programProduct.underEdit"/>
                <span class="rnr-form-error" style="display:none;" id="currentPrice{{$index}}"
                      openlmis-message="error.number.only"></span>
                        </div>
                    </div>
                </div>





            </div>
        </div>

        <div class="span2">
        <span ng-show="!programProduct.underEdit">
          <input id="programProductEdit{{$index}}" type="button"
                 class="btn program-schedules-btn btn-small btn-primary pull-right"
                 ng-click="edit($index)"
                 openlmis-message="button.edit"/>
        </span>

        <span ng-show="programProduct.underEdit">
          <input id="programProductEditCancel{{$index}}" type="button"
                 class="btn program-schedules-add-new-btn btn-small pull-right"
                 ng-click="cancelEdit($index)"
                 openlmis-message="button.cancel"/>

          <input id="programProductEditDone{{$index}}" type="button"
                 class="btn btn-primary program-schedules-add-new-btn btn-small pull-right"
                 ng-click="programProduct.underEdit = false;" ng-disabled="mandatoryFieldsNotFilled(programProduct)"
                 openlmis-message="button.done"/>
        </span>
        </div>
    </div>

    <div class="row-fluid add-program-schedule" tab-scroll>
      <div class="span2 fluid-grid-cell">
        <select class="select2-container span10" id="addProgramSelect"
                ng-options="program as program.name for program in programs | orderBy: 'name'"
                ng-model="newProgramProduct.program">
          <option value="" openlmis-message="programMessage"></option>
        </select>
      </div>

      <div class="span3 fluid-grid-cell">
        <select class="select2-container span10" id="addCategorySelect"
                ng-options="category as category.name for category in categories | orderBy: 'name'"
                ng-model="newProgramProduct.productCategory">
          <option value="" openlmis-message="placeholder.select.category"></option>
        </select>
      </div>

      <div class="span1 fluid-grid-cell">
        <input type="checkbox" id="activeAdd" ng-model="newProgramProduct.active" ng-false-value="false"/>
      </div>
      <div class="span1 fluid-grid-cell">
        <input type="checkbox" id="fullSupply" ng-model="newProgramProduct.fullSupply" ng-false-value="false"/>
      </div>

      <div class="span3">
        <div class="row-fluid">
          <div class="span4 fluid-grid-cell">
            <div class="position-relative">
              <input type="text" id="displayOrderAdd" ng-model="newProgramProduct.displayOrder"
                     class="right-justified"
                     name="addDisplayOrder" numeric-validator="positiveInteger" maxlength="10"/>
              <span class="rnr-form-error" style="display:none;" id="addDisplayOrder"
                    openlmis-message="error.number.only"></span>
            </div>
          </div>

          <div class="span4 fluid-grid-cell">
            <div class="position-relative">
              <input type="text" id="dosesPerMonthAdd" ng-model="newProgramProduct.dosesPerMonth"
                     class="right-justified"
                     numeric-validator="positiveInteger" maxlength="10" name="addDosesPerMonth"/>
              <span class="rnr-form-error" style="display:none;" id="addDosesPerMonth"
                    openlmis-message="error.number.only"></span>
            </div>
          </div>

            <div class="span4 fluid-grid-cell">
                <div class="position-relative">
                    <input type="text" id="currentPriceAdd" ng-model="newProgramProduct.currentPrice"
                           class="right-justified"
                             maxlength="10" name="addCurrentPrice"/>
              <span class="rnr-form-error" style="display:none;" id="addCurrentPrice"
                    openlmis-message="error.number.only"></span>
                </div>
            </div>
        </div>
      </div>

      <div class="span2 fluid-grid-cell">
        <input type="button" class="btn btn-primary btn-small pull-right"
               id="programProductAdd"
               ng-click="addNewProgramProduct()" ng-disabled="mandatoryFieldsNotFilled(newProgramProduct)"
               openlmis-message="button.add"/>
      </div>
    </div>
  </div>
</div>
</div>